<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Personal website for showcasing my skills and projects">
  <title>My Personal Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- 导航栏 -->
  <header>
    <nav>
      <ul>
        <li><a href="#home">主页</a></li>
        <li><a href="#about">关于我</a></li>
        <li><a href="#skills">技能</a></li>
        <li><a href="#projects">项目</a></li>
        <li><a href="#contact">联系方式</a></li>
      </ul>
    </nav>
  </header>

  <!-- 欢迎页面 -->
  <section id="home" class="landing-page">
    <div class="welcome-text">
      <h1>你好,我是徐嘉文</h1>
      <p>这是我的个人介绍</p>
      <a href="#about" class="cta-button">了解更多关于我</a>
    </div>
  </section>

  <!-- 关于我 -->
  <section id="about">
    <div class="container">
      <h2>关于我</h2>
      <p>我叫徐嘉文,天津大学智能与计算学部大类13班,今年19岁,实际上,今天刚好就是我的19岁生日!请多指教!</p>
    </div>
  </section>

  <!-- 技能 -->
  <section id="skills">
    <div class="container">
      <h2>技能</h2>
      <div class="skills-list">
        <div class="skill-item">
          <h3>吃饭</h3>
        </div>
        <div class="skill-item">
          <h3>睡觉</h3>
        </div>
        <div class="skill-item">
          <h3>反正就是特能学!</h3>
        </div>
      </div>
    </div>
  </section>

  <!-- 项目 -->
  <section id="projects">
    <div class="container">
      <h2>项目</h2>
      <div class="project-item">
        <h3>项目 1</h3>
        <p>一个简易的图书管理系统,共有录入书籍信息,查询书籍信息,删除书籍信息,修改书籍信息,清空书籍信息,退出系统六项功能,通过data.txt文件存储数据来模拟数据库的功能,从某种意义上说,这是一个前端和后端共同配合的单机应用,只不过客户端和服务器是同一台电脑. <a href="https://gitee.com/xujiawen8610/book-management-system.git">项目地址</a></p>
      </div>
      <div class="project-item">
        <h3>项目 2</h3>
        <p>一个简易的计算器,包括加减乘除,平方,开方等基础功能,并在后期美化了一下界面,同时增加了记忆功能. <a href="https://gitee.com/xujiawen8610/simple-calculator.git">项目地址</a></p>
      </div>
    </div>
  </section>

  <!-- 联系方式 -->
  <section id="contact">
    <div class="container">
      <h2>联系方式</h2>
      <!-- 将表单提交到 process.php 处理 -->
      <form id="contact-form" action="process.php" method="post">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">邮件:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">留言:</label>
        <textarea id="message" name="message" required></textarea>

        <button type="submit">发送你的信息给我</button>
      </form>
    </div>
  </section>

  <footer>
    <p>&copy; 2024 徐嘉文. All rights reserved.</p>
  </footer>

  <script src="scripts.js"></script>
</body>
</html>